<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点的概念</title>
    
    <script type="text/javascript">
        function getJieD(){
            var a = document.getElementById("A");
            //获取节点的文本
            console.info("节点文本" + a.innerText);
            console.info("节点Html" + a.innerHTML);
            //获取节点的值
            console.info("节点名称：" + a.nodeName);
            console.info("节点值：" + a.nodeValue);

            //子节点
            console.info("子节点：" + a.childNodes[1]);//得出一个对象           
            console.info("子节点 名称：" + a.childNodes[1].nodeName);
            console.info("子节点 值：" + a.childNodes[1].nodeValue);
            //相邻节点
            console.info("相邻节点：" + a.nextSibling);

            //属性
            var b =  a.attributes;
            console.info("节点属性：" + b);
            console.info("节点属性的长度：" + b.length);
            for(var i = 0; i < b.length; i++){
                console.info("节点属性的 名称：" + b[i].nodeName);
                console.info("节点属性的 值：" + b[i].nodeValue);
            }

            //子节点循环读取
            var c = a.childNodes;
            console.info("子节点的长度：" + c.length);
            for(var i = 0; i < c.length; i++){
                console.info("子节点的 名称：" + c[i].nodeName);
                console.info("子节点的 值：" + c[i].nodeValue);
            }
        }
    </script> 
    

</head>

<body>
    <div id="A" title="文本标题">
        这是第一个节点，而且是父节点
        <ul id="A_a">子节点
            <li id="a-a_1">子节点的子节点</li>
        </ul>
        <ul id="A-b">子节点之相邻节点</ul>
    </div>
    <div>新的节点</div>
    
    <input type="button" value="移除属性" onclick="getJieD()" />
</body>

</html>